<template>
  <div class="use-emoji-option">
    <span v-if="labelText" class="option-label">{{ labelText }}：</span>
    <template v-if="type === 'radio'">
      <ElRadioGroup v-model="localValue" :disabled="disabled">
        <ElRadio :label="true">{{ tr(yesLabelKey) }}</ElRadio>
        <ElRadio :label="false">{{ tr(noLabelKey) }}</ElRadio>
      </ElRadioGroup>
    </template>
    <template v-else>
      <ElSwitch v-model="localValue" :disabled="disabled" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue';
import { ElRadioGroup, ElRadio, ElSwitch } from 'element-plus';

const props = withDefaults(defineProps<{
  /** 是否使用表情（v-model），未选择时为 undefined */
  modelValue?: boolean;
  /** 翻译函数 */
  t?: (key: string) => string;
  /** 标签文案（优先级高于 labelKey） */
  label?: string;
  /** 标签文案的 i18n key，默认 mass.useTag（是否用表情） */
  labelKey?: string;
  /** 是/否 文案 key */
  yesLabelKey?: string;
  noLabelKey?: string;
  /** 展示形态：radio | switch，默认 radio */
  type?: 'radio' | 'switch';
  /** 是否禁用 */
  disabled?: boolean;
}>(), {
  labelKey: 'mass.useTag',
  yesLabelKey: 'common.yes',
  noLabelKey: 'common.no',
  type: 'radio',
  disabled: false,
});

const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>();

const tr = (key: string): string => (props.t ? props.t(key) : key);
const labelText = computed(() => props.label ?? tr(props.labelKey!));

const localValue = ref<boolean | undefined>(props.modelValue);

watch(
  () => props.modelValue,
  (val) => {
    if (val !== localValue.value) localValue.value = val;
  }
);

watch(localValue, (val) => {
  if (typeof val === 'boolean') {
    emit('update:modelValue', val);
  }
});
</script>

<style scoped>
.use-emoji-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.option-label {
  color: #606266;
  font-size: 13px;
}
</style>
